import Vue from 'vue'
// import Vuex from 'vuex'
import Vuex from './myvuex'
import * as types from './types'
import state from './state'
import mutations from './mutations'
import actions from './actions'

import login from './login'
Vue.use(Vuex)
// Vue.use(Vuex)// Vue.use怎么保证的 一个插件只能用一次
let count = localStorage.getItem('qqqq')||100
const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters:{
    type(state){
      return state.count%2 ? '奇数' : "偶数"
    }
  },
  // modules:{
  //   qqq:login
  // }
})
// const store = new Vuex.Store({
//   state: {
//     // 这里存储的是公用数据
//     count:count/1,
//     age:100,
//     name:666
//   },
//   mutations:{
//     // 存储的都是 修改state中的属性的方法
//     [types.CHANGE_COUNT](state,option){
//       // 这里的参数 最多也就是这两个， 最少就是一个state
//       // 这里的state就是上边的哪个state
//       console.log(arguments)
//       state.count += option
//       // setTimeout(() => {
//       //   state.count += option 
//       // }, 1000);
      
//     },
//     fn1(){
//       console.log('f1',arguments)
//     },
//     fn2(){
//       console.log('f2',arguments)
//     },
//     fn3(){
//       console.log('f3',arguments)
//     }
//   },
//   actions:{
//     changeCountFn(store,option){
//         // 这里的参数 最多也就是这两个， store
//         // 这里的store就是上边的创建的哪个store实例
//         setTimeout(() => {
//           store.commit('changeCount',option)
//         }, 1000);
//     }
//   },
//   getters:{
//     type(state){
//       return state.count%2 ? '奇数' : "偶数"
//     }
//   },
//   modules
// })
export default store

/* 
  new Vuex.Store({
    state:{
      ary:[]
    },
    mutations:{
      change(state,option){
        state.xx = option.xxx
      }
    },
    actions:{
      change(store,option){
        异步--> store.commit()
      }
    },
    getters:{
      // vuex的计算属性
    }
  })

  我们组件中使用vuex的时候 一般会使用计算属性去接受

  辅助函数 mapState  什么时候 使用？  当我们某一个组件中使用了好几个vuex中的数据， 这时可以借助辅助函数减少代码量

  若模块中的mutations或者actions 跟其他重复了。， 那么在调用的时候 会把所有同名的函数挨个执行
*/